import React from 'react';
import { Row, Col,Icon } from 'antd';
import {WeaLocaleProvider } from 'ecCom';
import BoardStore from '../../stores/board/BoardStore';
const getLabel = WeaLocaleProvider.getLabel;
import jQuery from 'jquery';

export default class Item extends React.Component<{data:any,columnGrid:any,isTitle:string,hasRight:boolean,store:BoardStore}, any>{


    componentDidMount(){
        const {store}=this.props;
        //新增Column元素，当前元素渲染到页面上后将元素添加到muuri
        const { data,columnGrid} = this.props;
        if(data.iscreate&&data.iscreate=='1'){
            const element:any=document.getElementById('item_'+data.id);
            let item=columnGrid.add([element], {index:0});
            let scrollElement=item[0].getGrid()._element.parentNode;
            if(scrollElement.scrollTop!=0){
                scrollElement.scrollTop=0;
            }
        }
        var height = store.windowHeight - jQuery('.cube_board #btnDiv').height();
        jQuery('.cube_board #cube_board').css('height',height)
    }

    render() {
        const{data,isTitle,hasRight,store}=this.props;
        let right = hasRight?true:false;
        if(store.defaultTabSet == '2' && data.sharelevel < 2){
            right = false;
        }
        return <div data-showlevel={data.sharelevel} id={"item_"+data.id} className="board-item muuri-item muuri-item-shown" >
            <div className="board-item-content" style={right?{cursor:'move'}:{cursor:'not-allowed'}}>
                <Row className="status-principal">
                    <Col span={16}>
                        <span style={{backgroundColor:'#FEEEEE',padding: '3px 5px 3px 5px',borderRadius: '5px',textAlign:'center'}}>
                            <Icon style={{color:'#FA5D4B'}} type="minus-circle-o" />&nbsp;&nbsp;{data.statusText}
                        </span>
                    </Col>
                    <Col span={8} style={{textAlign:'right'}}><span dangerouslySetInnerHTML={{ __html: data.principal }}></span></Col>
                </Row>
                <Row>
                    <Col span={24} style={{fontSize:'15px',padding:'5px 0px 5px 0px'}}><span style={isTitle=='1'?{cursor:'pointer'}:{}} id="boardItemTitle" dangerouslySetInnerHTML={{ __html: data.title }}></span></Col>
                </Row>
                <Row className="date-manager">
                    <Col span={16}>{getLabel(22326, "截止日期")}:<span dangerouslySetInnerHTML={{ __html: data.enddate }}></span></Col>
                    <Col span={8} title={getLabel(389170, "直接下级个数")} style={{textAlign:'right'}}><span className="icon-coms-DisplaySubordinates"></span><span dangerouslySetInnerHTML={{ __html: data.manager }}></span></Col>
                </Row>
                <Row  style={{fontSize:'12px',padding:'5px 0px 5px 0px',color:'white'}}>
                    <Col span={20} style={{lineHeight:'25px'}}>
                        {data.modelableid&&data.modelableid.map(element=>{
                            return <span style={{backgroundColor:element.color,padding: '3px 5px 3px 5px',borderRadius: '5px',textAlign:'center',marginRight:'5px'}}>
                            {element.tabname}
                        </span>
                        })}
                    </Col>
                    <Col style={{color:'red',textAlign:'right','word-break':'break-all'}} span={4}><span dangerouslySetInnerHTML={{ __html: data.progress }}></span></Col>
                </Row>
            </div>
        </div>
    }
}